import { h } from 'vue'

// https://blog.csdn.net/weixin_47436633/article/details/125800228
const doClickEvt =$evt => {
    console.log('clicked:', $evt.target)
    // 如果触发事件的元素不是事件绑定的元素
    // 则返回
    if ($evt.target !== $evt.currentTarget) return
    // 如果向上键不是回车键，则终止
    // 没有同时按下按键 (13) 和 shift 键
    if (!$evt.shiftKey || $evt.keyCode !== 13) return
    // 停止事件传播
    $evt.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    $evt.preventDefault()
    // ...
}

const doThisOnce=$evt => {
    console.log('doThisOnce:', $evt.target)
}
export default {
    props: ['message'],
    //render语法 props 、class、on(事件)、slots属性
    /*
    h('div',
        {
            class: { default: true, first: this.type == 1 },
            props: { value: '值1', type: 'border-card' },
            on: { click: () => alert(), change: () => console.info('change it') }
        },
        [this.$slots.default, this.$slots.tag] )
    */
    render() {
        // 事件修饰符对于 .passive 、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：
        return h('input', {
            //onClick: $evt => console.log('clicked:', $evt.target),
            onClick: doClickEvt,
            //onClickCapture: this.doThisInCapturingMode,
            onKeyupOnce: doThisOnce,
            //onMouseoverOnceCapture: this.doThisOnceInCapturingMode
            value: this.message
        } )
    },
}